<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style type="text/css">
	body{
	}
	#canvas1,#canvas2{
		background-color: #194d4d;
	}
</style>
<body>
	<canvas id="canvas2" width="800" height="800"></canvas>
	<!-- <canvas id="canvas1" width="80" height="80"></canvas> -->
</body>
<script type="text/javascript">
	var canvas2 = document.getElementById("canvas2");
	var ctx2 = canvas2.getContext('2d');

	var canvas1 = document.getElementById("canvas1");
	var ctx1 = canvas2.getContext('2d');
	function draw(rot,opt,length,sx,sy){
		// rot 角度 opt透明度 length半径 sx x轴 y轴
		
		ctx1.lineWidth = 2;
		var j=3
		var XUEHUA = {
			length: length,//雪花的半径
			radius: 3,//小圆的半径
			BLUR: 4//模糊度
		}
		server = Math.floor(XUEHUA.length/9);
		console.log(server);
		PI = Math.PI, sin = Math.sin;
		ctx1.save();
		ctx1.translate(sx,sy);
		ctx1.strokeStyle = 'rgba(255,255,255,'+opt+')';
		for(var i = 0; i < 6; i++){
			ctx1.save();
			ctx1.rotate(Math.PI/3 * i+rot);

			ctx1.beginPath();
			ctx1.moveTo(0,0);
			ctx1.lineTo(0, -XUEHUA.length+XUEHUA.radius*2);
			ctx1.arc(0, -XUEHUA.length+XUEHUA.radius, XUEHUA.radius,Math.PI/2, Math.PI*5/2);
			for(var n=0;n<j;n++){
				ctx1.moveTo(0,-server*n);
				ctx1.lineTo(server*n*Math.cos(PI/6), -server*n*Math.sin(PI/6));
			}
			for(var m=j-1;m<9;m++){
				ctx1.moveTo(0,-server*m);
				ctx1.lineTo(server*m, -server*m-4);
				ctx1.moveTo(0,-server*m);
				ctx1.lineTo(-server*m, -server*m-4);
			}
			
			ctx1.stroke();
			ctx1.restore();
		}
		ctx1.restore();
	}

	// draw(0.1,0.6,30,80,90);
	game();

	var x=20,y = 400,rott=Math.PI/2000, starttime,deltetime;
	function game(){
		// init();
		starttime = Date.now();
		deltetime = 0;
		
		animation();
	}

	function animation(){
		window.requestAnimationFrame(animation);
		luoxia();
		var now = Date.now();
		deltetime = now-starttime;
		starttime = now;
		// console.log(deltetime);
	}
	var opt = 1,length=10;
	function luoxia(){
		ctx2.clearRect(0, 0, 800, 800);
		y += 0.8;
		rl = Math.random()*4-1.4 //[-2,2]
		// if(){

		// }
		x += rl;
		rott += Math.PI/400;
		opt -= 0.01;
		length += 0.2;
		if(length>40) length=40;

		draw(rott,opt,length,x,y);
		draw(rott*1.2,opt*0.5,length*0.6,x+100,y+80);
		

		if(y>700||opt<0||x>600){
			y = 20;
			x = 120;
			opt = 1,length=10;
		}
	}

var snow = function(){
	this.length = length;
}
snow.prototype.num = 30;
snow.prototype.init = function(argument){
	this.length = length;
	this.x = x;
	this.y = y;
	this.rott = rott;
	this.opt = opt;
};



</script>
</html>